<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import AddColumn from "@/views/ming/addColumn.vue";

const categories =ref([])
const selectedItems=ref([])
const visible=ref(false);
const handleAdd = () => {
  // 处理添加逻辑
  visible.value=true;
};
const column=ref({})
const handleEdit = (row) => {
  // 处理编辑逻辑
  axios.get(`/column/getColumnById/${row.id}`).then(resp=>{
    column.value=resp.data;
    visible.value=true;
  })
};

const handleSelectionChange = (val) => {
  selectedItems.value = val;
  ids.value=val.map(item=>item.id)
};
const initData = ()=>{
  axios.get("/column/getAllColumns").then(resp=>{
    categories.value=resp.data;
  })
}
const handlerDelete =(row)=>{
  ElMessageBox.confirm(
      `请问确定删除${row.columnName}栏目吗？`,
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete(`/column/deleteColumn/${row.id}`).then(resp=>{
          ElMessage.success(resp.data);
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}
const ids=ref([])
const bathDelete =()=>{
  ElMessageBox.confirm(
      `请问确定删除所选项吗？`,
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete(`/column/batchDelete`,ids.value).then(resp=>{
          ElMessage.success(resp.data);
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}
const getVisible =(val)=>{
  visible.value=val;
}
onMounted(()=>{
  initData();
})
const handleChange =(row)=>{
  axios.put(`/column/changeEnabled/${row.id}/${row.enabled}`).then(resp=>{
    ElMessage.success(resp.data);
  })
}
</script>

<template>
  <div class="category-list">
    <h2>栏目列表</h2>
    <el-button type="primary" @click="handleAdd">+ 添加</el-button>
    <el-button type="danger" @click="bathDelete" :disabled="selectedItems.length===0">删除</el-button>

    <el-alert v-if="selectedItems.length > 0" :title="`已选择${selectedItems.length}项，可以进行批量操作`" type="info" show-icon></el-alert>

    <el-table :data="categories" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="columnName" label="栏目名称" width="180"></el-table-column>
      <el-table-column prop="columnOrder" label="栏目顺序" width="180"></el-table-column>
      <el-table-column prop="columnDescription" label="栏目描述"></el-table-column>
      <el-table-column prop="enabled" label="是否显示">
        <template #default="scope">
          <el-switch
              v-model="scope.row.enabled"
              :active-value="1"
              :inactive-value="0"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              @Change="handleChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handlerDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

<AddColumn :visible="visible" @dialogVisible="getVisible" :column="column"/>
</template>

<style scoped>
.category-list {
  padding: 20px;
}
</style>